<template>
	<view class="container">
    <public-loading></public-loading>
    <z-paging ref="paging" v-model="addressList" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="收货地址"></z-nav-bar>
      </template>
      <view >
        <up-swipe-action>
          <up-swipe-action-item
            :options="options"
            :name="index"
            @click="handleUserDelete"
            v-for="(item,index) in addressList" :key="index"
          >
            <view class="add-box flex-center-between"  @click="handleSave(item)">
              <view class="left">
                {{item.recipientName}} <text>{{item.recipientPhone}}</text>
                <view class="add">
                  {{item.recipientAddress}}
                </view>
              </view>
              <view @click="goEdit(item)" hover-class="none">
                <view class="right">
                  <image src="./static/icon/edit_address.png" mode=""></image>
                </view>
              </view>
            </view>
          </up-swipe-action-item>
        </up-swipe-action>

      </view>
      <view class="bottom-btn-box">
        <main-button @click="navigateTo('/pagesMy/user/address_add')">添加地址</main-button>
      </view>
      <up-modal
        :show="show"
        :showCancelButton="true"
        :title="title"
        :closeOnClickOverlay="true"
        @confirm="confirm"
        @cancel="cancel"
        @close="cancel"
        content='确定是否要删除地址'>
        <view class="slot-content">
          确定是否要删除地址
        </view>
      </up-modal>
    </z-paging>

	</view>
</template>

<script setup>
	// import { userAddressList } from '@/api/user';
	import {onMounted,ref,reactive } from "vue";
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { navigateTo } from '@/utils/navigator'
  import {getUserAddress} from '@/api/pagesMy/address'
  import {useCustomStores} from '@/utils/hook'
  import {addressRemove} from '../api/pagesMy/address'
  const {ShopStore,userStore} = useCustomStores()
  const {userInfo} = userStore
//-----------------------------------data----------------------------------------
   //地址list
	let	addressList = ref([])
  const paging = ref(null)
  const type = ref(null)
  const indexOf= ref(null) //对应数组的下标
  const title = ref('提示')
  const show = ref(false)
  // 使用 reactive 创建响应式对象
  const options = reactive([{
    text: '删除',
    style: {
      backgroundColor: '#f56c6c',
      width: '150rpx',
    }
  }]);
//-----------------------------------onMounted-------------
	onLoad((options) => {
		console.log('onLoad====')
    if(options.type){
      type.value = options.type
    }
	    // getUserAddressList();
	});
	onShow(() => {
		console.log('onShow====')
     paging.value.reload();
	    // getUserAddressList();
	});


//-----------------------------------function------------------------------------

  const queryList = (pageNo, pageSize) => {
    // 此处请求仅为演示，请替换为自己项目中的请求
    console.log(userInfo)
    getUserAddress({
      pageNum:pageNo,
      pageSize:pageSize,
      userId:userInfo.userId
    }).then(res=>{
      paging.value.complete(res)
    })
  }
  const handleSave=(item)=>{
    if(type.value){
      ShopStore.setAddress(item)
      uni.navigateBack({
        delta:1
      })
    }

  }
  function goEdit(item){
    navigateTo('/pagesMy/user/address_add?type=1'+'&addressInfo='+JSON.stringify(item),)
  }
 const handleUserDelete =(e)=>{
    const {name} = e
   indexOf.value = name
   show.value = true
 }
 const confirm =()=>{
   addressRemove({
     ids:addressList.value[indexOf.value].id
   }).then(res=>{
     paging.value.reload();
     show.value = false
     uni.showToast({
       title: '删除成功',
       icon: 'none'
     })
   })
 }
 const cancel = ()=>{
    show.value = false
  }
</script>

<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss">
@import "./style/common.scss";
	.container{
		padding-bottom: 200rpx;
	}
</style>
